<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('订单信息')" />
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script src="//unpkg.com/element-ui@2.15.3/lib/index.js"></script>
    <link href="css/showOrder.css">
    <link th:href="@{/css/showOrder.css}" rel="stylesheet"/>
</head>

<body>
<div id = "app1" style="margin:0 auto; width: 1500px;">
        <div id="app">
            <el-steps :space="200" th:if="${orderEntity.state==0}"   :active="1" finish-status="success">
                <el-step title="提交订单"></el-step>
                <el-step title="待收货"></el-step>
                <el-step title="已送达"></el-step>
                <el-step title="已完成"></el-step>
            </el-steps>
            <el-steps :space="200" th:if="${orderEntity.state==1}"   :active="2" finish-status="success">
                <el-step title="提交订单"></el-step>
                <el-step title="待收货"></el-step>
                <el-step title="已送达"></el-step>
                <el-step title="已完成"></el-step>
            </el-steps>
            <el-steps :space="200" th:if="${orderEntity.state==2}"   :active="3" finish-status="success">
                <el-step title="提交订单"></el-step>
                <el-step title="待收货"></el-step>
                <el-step title="已送达"></el-step>
                <el-step title="已完成"></el-step>
            </el-steps>
            <el-steps :space="200" th:if="${orderEntity.state==3}"   :active="4" finish-status="success">
                <el-step title="提交订单"></el-step>
                <el-step title="待收货"></el-step>
                <el-step title="已送达"></el-step>
                <el-step title="已完成"></el-step>
            </el-steps>
            <el-steps :space="200" th:if="${orderEntity.state==4}"   :active="1" finish-status="success">
                <el-step title="已关闭"></el-step>
            </el-steps>
        </div>
<!--    订单信息-->
<div class="panel panel-default">

    <!-- Default panel contents -->
    <div class="panel-heading">订单信息</div>
    <!-- Table -->
    <table class="table table-bordered">
        <tr style="background-color: #F2F6FC;font-size: 12px;">
            <th>订单编号</th>
            <th>用户id</th>
            <th>支付状态</th>
            <th>订单状态</th>
            <th>创建时间</th>
            <th>支付时间</th>
            <th>更新时间</th>
            <th>完成时间</th>
        </tr>
        <tr  th:each="order1:${orderEntity}" >
            <td th:text="${order1.id}" ></td>
            <td th:text="${order1.user_id}">1</td>
            <div th:switch="${order1.pay_state}">
                <div th:case="0">
                    <td >未付款
                    </td>
                </div>
                <div th:case="1">
                    <td >已付款
                    </td>
                </div>
                <div th:case="2">
                    <td >申请退款
                    </td>
                </div>
                <div th:case="3">
                    <td >已退款
                    </td>
                </div>
            </div>
            <div th:switch="${order1.state}">
                <div th:case="0">
                    <td >未付款
                    </td>
                </div>
                <div th:case="1">
                    <td >待收货
                    </td>
                </div>
                <div th:case="2">
                    <td >已送达
                    </td>
                </div>
                <div th:case="3">
                    <td >已完成
                    </td>
                </div>
                <div th:case="3">
                    <td >已关闭
                    </td>
                </div>
            </div>
            <td th:text="${#dates.format(order1.create_time,'yyyy-MM-dd')}">1</td>
            <td th:text="${#dates.format(order1.pay_time,'yyyy-MM-dd')}" >1</td>
            <td th:text="${#dates.format(order1.update_time,'yyyy-MM-dd')}">1</td>
            <td th:text="${#dates.format(order1.complete_time,'yyyy-MM-dd')}">1</td>
        </tr>
    </table>

</div>
<!--   收货人信息 -->
<div class="panel panel-default">
    <!-- Default panel contents -->
    <div class="panel-heading"> 收货人信息</div>
    <!-- Table -->
    <table class="table table-bordered">
        <tr style="background-color: #F2F6FC;font-size: 12px;">
            <th>收货人</th>
            <th>手机号</th>
            <th>收货地址</th>
        </tr>
        <tr th:each="user:${user}">
            <td th:text="${user.username}">1</td>
            <td th:text="${user.phone}">1</td>
            <td th:text="${user.address}">1</td>
        </tr>
    </table>
</div>
<!--    商品信息-->
<div class="panel panel-default">
    <!-- Default panel contents -->
    <div class="panel-heading"> 商品信息</div>
    <!-- Table -->
    <table class="table table-bordered">
        <tr style="background-color: #F2F6FC;font-size: 12px;">
            <th>商品图片</th>
            <th>商品名称</th>
            <th>价格</th>
            <th>属性</th>
            <th>数量</th>
        </tr>
        <tr th:each="oi:${orderItemEntities}">
            <td style="width:20%"><img th:src="${oi.img}" style="width: 100px; height:100px;"></td>
            <td th:text="${oi.product_name}">1</td>
            <td th:text="${oi.product_price}">1</td>
            <td th:text="${oi.product_size}">1</td>
            <td th:text="${oi.product_num}">1</td>
        </tr>
        <tr>
            <td><span style="font-weight: bold">合计:</span><div style="float: right; color: red" th:each="order:${orderEntity}" th:text="${order.total_amount}"></div></td>
        </tr>
    </table>
</div>
</div>
</body>
<script type="text/javascript">
    new Vue().$mount('#app');
</script>
<th:block th:include="include :: footer" />
</html>